|
Most desktop applications have this layout:
1. The top layer has menu and toolbar. 2. There are sidebars on left and/or right side. 3. There is a status bar and widgets at the bottom. 4. In the middle, we have the main work area. The LayoutContainer captures this pattern. Each box is represented by a layout widget, such as a ContentPane. Each box has a position, which can be one of top, bottom, left, right and client.The "client" position refers to the main work area. It is also the one that grows with the size of the browser window. All other boxes have a fixed width (for left and right) or height (for top and bottom). Copy template.html and paste it as layout_container.html. Add two dojo.require() statements as shown below in boldface.
<script type="text/javascript">
Within the <head> element, define a style as follows.dojo.require("dijit.form.Button"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.LayoutContainer"); </script> Within the <body> element, add the layout container as follows. <div dojoType="dijit.layout.LayoutContainer"> <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background:red;height:50px">Header </div> <div dojoType="dijit.layout.ContentPane" layoutAlign="bottom“ style="background:blue"> </div><div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background:green;width: 120px;">Sidebar</div> <div dojoType="dijit.layout.ContentPane" layoutAlign="client"> Client area </div> </div> The code <style> .screen {height: 400px; width: 600px; margin: 0; padding: 0;} </style> Set the class of the <html> element: <html xmlns="http://www.w3.org/1999/xhtml" class="screen"> Set the class of body element: <body class="screen tundra"> Set the class of the LayoutContainer widget: <div dojoType="dijit.layout.LayoutContainer" class="screen"> Save changes. Note: Here, we set a fixed size for the screen. You can also set it to a % figure (such as 75%). This will make the client area grow or shrink as the browser window is resized. Run the file in the server (http://localhost:8080/AjaxController/layout_container.html). Each bunch of widgets is created using an AccordionPane widget. Add a new dojo.require() statement below the existing ones. dojo.require("dijit.layout.AccordionContainer"); This will also include code for the AccordionPane widget. Within the left hand side bar, add the accordion widget as shown below in bold face.
<div dojoType="dijit.layout.ContentPane" layoutAlign="left"
style="background:green;width: 120px;"> <div dojoType="dijit.layout.AccordionContainer"> <div dojoType="dijit.layout.AccordionPane" selected="true" title="Tools"> <button dojoType="dijit.form.Button">Save</button><br/> <button dojoType="dijit.form.Button">Reload</button> </div> <div dojoType="dijit.layout.AccordionPane" title="Options"> <button dojoType="dijit.form.Button">Configure</button><br/> <button dojoType="dijit.form.Button">Session</button> </div> </div> </div> |
copyright © 2014 - all rights riserved by javatechnologycenter.com